import React, { useState, useRef } from 'react';
import { ProTable, PageContainer, ProForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { Drawer, Button, message, Popconfirm, Descriptions } from 'antd';
import { fetchFeedbackList, createFeedback, updateFeedback, deleteFeedback } from '@/services/ant-design-pro/feedback';
import type { ActionType } from '@ant-design/pro-components';
import type { Feedback } from '@/types/feedback';
import { useAccess } from 'umi';

const FeedbackList: React.FC = () => {
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState<Feedback | null>(null);
  const [form] = ProForm.useForm();
  const actionRef = useRef<ActionType>();
  const [activeKey, setActiveKey] = useState<string>('1');
  const access = useAccess();
  const handleEdit = (record: Feedback) => {
    setCurrentRecord(record);
    form.setFieldsValue(record);
    setDrawerVisible(true);
  };

  const handleAdd = () => {
    setCurrentRecord(null);
    form.resetFields();
    setDrawerVisible(true);
  };

  const handleFinish = async (values: Feedback) => {
    try {
      const response = currentRecord
        ? await updateFeedback({ ...currentRecord, ...values })
        : await createFeedback(values);

      if (response.data) {
        message.success(currentRecord ? '修改成功' : '添加成功');
        setDrawerVisible(false);
        actionRef.current?.reload();
      } else {
        message.error(response.message || '操作失败');
      }
    } catch (error) {
      message.error('操作失败');
    }
  };

  const handleDelete = async (id: number) => {
    try {
      const response = await deleteFeedback(id);
      if (response) {
        message.success('删除成功');
        actionRef.current?.reload();
      } else {
        message.error(response.message || '删除失败');
      }
    } catch (error) {
      message.error('删除失败');
    }
  };

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      render: (text: string, record: Feedback) => <a onClick={() => handleEdit(record)}>{text}</a>,
    },
    {
      title: '联系方式',
      dataIndex: 'mobilePhone',
    },
    {
      title: '反馈内容',
      dataIndex: 'opinionContent',
    },
    {
      title: '提交时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_: string, record: Feedback) => [
        <a key="edit" onClick={() => handleEdit(record)}>查看</a>,
        access.canAccessMenu({menuCode:'0000080101'}) &&(  <Popconfirm
          key="delete"
          title="确定删除该项吗？"
          onConfirm={(event) => {
            event.stopPropagation(); // 阻止事件冒泡
            handleDelete({id:record.id})
          }}
        >
          <a key="delete">删除</a>
          </Popconfirm>)
      
      ],
    },
  ];

  return (
    <PageContainer header={{ title: '' }}>
      <ProTable<Feedback>
        columns={columns}
        rowKey="id"
        actionRef={actionRef}
        search={{labelWidth:'auto'}}
        request={async (params) => {
          try {
            const { data, total } = await fetchFeedbackList({...params,type:activeKey});
            return { data, success: true, total };
          } catch (error) {
            message.error('数据加载失败');
            return { data: [], success: false };
          }
        }}
        toolbar={{
          menu: {
    
            type: 'tab',
            activeKey: activeKey,
            items: [
              { key: '1', label: '意见反馈' },
              { key: '2', label: '申请体验' },
            ],
            onChange: (key) => {
              setActiveKey(key as string);
              actionRef.current?.reload();
            },
          },
        }}
        pagination={{ pageSize: 10 }}
        toolBarRender={() => [
          // <Button key="add" type="primary" onClick={handleAdd}>新增反馈</Button>,
        ]}
      />
      <Drawer
        title={currentRecord ? '反馈内容' : '新增反馈'}
        width={400}
        onClose={() => setDrawerVisible(false)}
        open={drawerVisible}
        style={{ paddingBottom: 80 }}
      >
       <Descriptions title="反馈信息" bordered style={{ marginTop: 24 }} layout="vertical" column={1}>
        <Descriptions.Item label="姓名">{currentRecord?.name || '-'}</Descriptions.Item>
        <Descriptions.Item label="联系方式">{currentRecord?.mobilePhone || '-'}</Descriptions.Item>
        <Descriptions.Item label="反馈内容">{currentRecord?.opinionContent || '-'}</Descriptions.Item>
      </Descriptions>
      </Drawer>
    </PageContainer>
  );
};

export default FeedbackList;
